<template>
  <div v-loading="homePageLoading" class="homePage">
    <!-- 数据统计 -->
    <div class="top-data-statistics">
      <div class="data-item" @click="taskDetailHandle('/messageList/systemMessage','ucenter_systemmessage')">
        <div class="item-icon one">
          <svg-icon icon-class="xiaoxi-solid" />
        </div>
        <div class="item-info">
          <div class="title">系统消息</div>
          <div class="num">{{ systemCountNum.systemMessageCount || '0' }}</div>
        </div>
      </div>
      <div class="data-item" @click="taskDetailHandle('/taskList/personTodo','ucenter_persontodo')">
        <div class="item-icon two"><svg-icon icon-class="daiban-solid" /></div>
        <div class="item-info">
          <div class="title">个人待办</div>
          <div class="num">{{ systemCountNum.personToDoCount || '0' }}</div>
        </div>
      </div>
      <div class="data-item" @click="taskDetailHandle('/approve/approveList','ucenter_approveList')">
        <div class="item-icon three"><svg-icon icon-class="shenpigaizhang-solid" /></div>
        <div class="item-info">
          <div class="title">待审批</div>
          <div class="num">{{ systemCountNum.toApproveCount || '0' }}</div>
        </div>
      </div>
      <div class="data-item">
        <div class="item-icon four"><svg-icon icon-class="renwuqizhi-solid" /></div>
        <div class="item-info">
          <div class="title">我的任务</div>
          <div class="num">{{ systemCountNum.myTaskCount || '0' }}</div>
        </div>
      </div>
      <div class="data-item">
        <div class="item-icon five"><svg-icon icon-class="shengyin-solid" /></div>
        <div class="item-info">
          <div class="title">通知公告</div>
          <div class="num">{{ systemCountNum.announcementCount || '0' }}</div>
        </div>
      </div>
    </div>
    <!-- 数据统计 -->
    <!-- 列表区 -->
    <div class="data-list-box">
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 个人待办 -->
          <div class="list-box">
            <div class="list-title-box">
              <div class="title-text">个人待办</div>
              <div class="title-icon" @click="taskDetailHandle('/taskList/personTodo','ucenter_persontodo')"><i class="el-icon-more" /></div>
            </div>
            <div class="list-content-box" style="height:408px;">
              <div v-show="personalToDo.length<=0" class="no-data-list">暂无数据</div>
              <el-row v-for="(item,index) in personalToDo" :key="index" class="list-content-item">
                <el-col :span="19" class="left">
                  <span v-show="item.isTimeOut" class="tag">超时</span>
                  <a class="link" href="javascript:;" @click="outerLinksClick(item)">【{{ item.applicationName }}】{{ item.title }}</a>
                </el-col>
                <el-col :span="5" class="right">
                  <span class="info">{{ formatTime(new Date(item.createTime.replace(/-/g,"/")).getTime(),'false') }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 个人待办 -->
        </el-col>
        <el-col :span="12">
          <!-- 通知公告 -->
          <div class="list-box">
            <div class="list-title-box">
              <div class="title-text">通知公告</div>
              <div class="title-icon"><i class="el-icon-more" /></div>
            </div>
            <div class="list-content-box" style="height:175px;">
              <div v-show="noticeList.length<=0" class="no-data-list">暂无数据</div>
              <el-row v-for="item in noticeList" :key="item.id" class="list-content-item">
                <el-col :span="19" class="left">
                  <a class="link" href="javascript:;" @click="outerLinksClick(item)">{{ item.title }}</a>
                </el-col>
                <el-col :span="5" class="right">
                  <span class="info">{{ formatTime(new Date(item.time.replace(/-/g,"/")).getTime(),'false') }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 通知公告 -->
          <!-- 待审批 -->
          <div class="list-box">
            <div class="list-title-box">
              <div class="title-text">待审批</div>
              <div class="title-icon" @click="taskDetailHandle('/approve/approveList','ucenter_approveList')"><i class="el-icon-more" /></div>
            </div>
            <div class="list-content-box" style="height:173px;">
              <div v-show="approvedList.length<=0" class="no-data-list">暂无数据</div>
              <el-row v-for="(item,index) in approvedList" :key="index" class="list-content-item">
                <el-col :span="18" class="left">
                  <span v-show="item.isTimeOut" class="tag">超时</span>
                  <a class="link" href="javascript:;" @click="outerLinksClick(item)">【{{ item.applicationName }}】{{ item.title }}</a>
                </el-col>
                <el-col :span="6" class="right">
                  <span class="info">{{ item.applicationName }}</span>
                  <span class="info">{{ formatTime(new Date(item.createTime.replace(/-/g,"/")).getTime(),'false') }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 待审批 -->
        </el-col>
      </el-row>
      <!-- 我的任务 -->
      <div class="my-task-box">
        <el-row>
          <el-col :span="24">
            <!-- 我的任务 -->
            <div class="list-box">
              <div class="list-title-box">
                <div class="title-text">我的任务</div>
                <div class="title-icon"><i class="el-icon-more" /></div>
              </div>
              <div class="list-content-box">
                <div v-show="myTaskList.length<=0" class="no-data-list">暂无数据</div>
                <el-row v-for="item in myTaskList" :key="item.id" class="list-content-item">
                  <el-col :span="18" class="left">
                    <span v-show="item.isTimeOut" class="tag">超时</span>
                    <a class="link" href="javascript:;" @click="outerLinksClick(item)">{{ item.title }}</a>
                  </el-col>
                  <el-col :span="6" class="right">
                    <span class="info">{{ item.type }}</span>
                    <span class="info">{{ item.distributePerson }}</span>
                    <span class="info">{{ formatTime(new Date(item.time.replace(/-/g,"/")).getTime(),'false') }}</span>
                  </el-col>
                </el-row>
              </div>
            </div>
          <!-- 我的任务 -->
          </el-col>
        </el-row>
      </div>
      <!-- 我的任务 -->
    </div>
    <!-- 列表区 -->
  </div>
</template>

<script>
import { getCountNumber } from '@/api/header'
import { getHomeToDo } from '@/api/home'
import { formatTime } from '@/utils/index'
export default {
  name: 'HomePage',
  data() {
    return {
      homePageLoading: false,
      systemCountNum: {},
      personalToDo: [],
      noticeList: [],
      approvedList: [],
      myTaskList: []
    }
  },
  mounted() {
    // this.dataInitialization()
  },
  methods: {
    // 数据初始化
    dataInitialization() {
      this.homePageLoading = true
      // 获取消息总条数
      getCountNumber().then(res => {
        if (res.success === 1) {
          this.systemCountNum = res.data
        }
      })
      // 获取个人待办
      getHomeToDo(1).then(res => {
        this.personalToDo = res.data.slice(0, 13)
      })
      // 获取个人待审批
      getHomeToDo(2).then(res => {
        this.approvedList = res.data.slice(0, 4)
        this.homePageLoading = false
      })
    },
    // 跳转更多列表
    taskDetailHandle(path, menuCode) {
      this.$router.push({ path: path, query: { menuCode: menuCode }})
    },
    // 时间格式化
    formatTime,
    // 跳转外链
    outerLinksClick(data) {
      this.$router.push(`/myiframe/urlPath?src=${data.linkUrl}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .homePage{
    padding: 10px;

    .list-box{
      // border: 1px solid #eee;
      box-shadow: 0px 2px 15px 2px #e8e8e8;
      border: 1px solid #eee;

      .list-title-box{
        background-color: #fff;
        box-shadow: none;
        border-bottom: 1px solid #eee;
      }

      .list-content-box{
        border: 0;
      }
    }

    .no-data-list{
      color: $colorC;
      text-align: center;
      padding: 30px 0;
    }

    .top-data-statistics{
      display: flex;
      padding: 10px 0 20px;

      .data-item{
        flex: 1;
        display: flex;
        justify-content: center;
        height: 98px;
        font-size: 14px;
        margin: 0 10px;
        box-shadow: 0px 2px 15px 2px #e8e8e8;
        border: 1px solid #eee;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 25px;
        cursor: pointer;

        .item-icon{
          width: 52px;
          height: 52px;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          margin-right: 20px;
          &.one{
            background-color: #16BC83;
            border: 4px solid #B9EBD9;
          }
          &.two{
            background-color: #FFAB00;
            border: 4px solid #FFE5B2;
          }
          &.three{
            background-color: #F15643;
            border: 4px solid #FACBC5;
          }
          &.four{
            background-color: #3E97EF;
            border: 4px solid #C2E0FD;
          }
          &.five{
            background-color: #16BC83;
            border: 4px solid #B9EBD9;
          }

          .svg-icon{
            font-size: 24px;
            margin-top: 10px;
          }
        }

        .item-info{
          margin-top: 5px;
          text-align: center;
        }

        .title{
          color: $colorC;
        }

        .num{
          color: $colorA;
          font-size: 18px;
          font-weight: 600;
          padding-top: 2px;
        }

        .info{
          font-size: 12px;
          color: $qup-color-danger;
          padding-top: 2px;
        }
      }
    }
    .data-list-box{
      padding: 0 10px;

      .my-task-box{
        margin-top: 20px;
        margin-bottom: 10px;
      }
    }
  }
</style>
